<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>test scroll</title>
    <style type="text/css">

        body{
            margin:0; padding:0;
        }

        .scroll-wrap{
            /*
              position: fixed;
              top:20%;
              left:30%;
              z-index:11;

            */
            background-color: #ccc;
            width: 170px;
            height: 265px;
            margin-left: 10px;
            overflow-y: scroll;
        }


    </style>
</head>
<body>

<p>手机上看，这里的确是不能拖动的。</p>
<p>手机上看，这里的确是不能拖动的。</p>
<p>内容...</p>

<div id="scrollWrap" class="scroll-wrap">
    <p>这是需要滚动的内容呢？</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>中间是OK的</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
    <p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>

</div>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>
<p>但！拖到底的时候，就连帶整个网页都向下拖了...</p>



<script type="text/javascript">

    document.getElementById('scrollWrap').addEventListener('touchstart', function(){

        if( this.scrollHeight - this.clientHeight == this.scrollTop){
            //event.preventDefault(); //阻止默认行为
            console.log('触底\n' + ' ');
        }
        remliste();
    })


    document.getElementById('scrollWrap').addEventListener('touchend', addliste);

    var move = function(e) {
        e.preventDefault && e.preventDefault();
        e.returnValue = false;
        e.stopPropagation && e.stopPropagation();
        return false;
    }
    //取消禁止滚动
    function remliste() {
        document.removeEventListener('touchmove', move, false);
    }
    //禁止滚动
    function addliste() {
        document.addEventListener('touchmove', move, false);
    }

    addliste();


</script>
</body>
</html>
